<template>
  <div class="home">
    <div>
      <div class="box" @click="add()">
      <p><input type="checkbox" v-model="qx"/>全选</p>
      人员
    </div>
    <button @click="fanxuan">反选</button>
    <br>
    <ul >
      <li v-for="(item,index) in list" :key="index" v-show="isShow">
           <input type="checkbox" v-model="item.checked">{{item.name}}
      </li>
    </ul>
    </div>
   
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: "第一组01", checked: false },
        { name: "第二组02", checked: false },
        { name: "第三组03", checked: false },
        { name: "第四组04", checked: false },
        { name: "第五组05", checked: false },
      ],
      isShow:false
    };

  },
  computed:{
    qx:{
      get(){
        return this.list.every(item=>item.checked)
      },
      set(v){
        this.list.forEach(item=>item.checked=v)
      }
    }
  },
  methods:{
    fanxuan(){
      this.list.forEach(item=>item.checked=!item.checked)
    },
    add(){
      this.isShow=true
    }
  }
};
</script>

<style>
.box{
  width: 800px;
  height: 50px;
  background: #eee;
  margin: 10px auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
li{
  list-style: none;
}
</style>
